<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NCard, NButton, NInput, NDivider } from 'naive-ui'

const router = useRouter()
const searchQuery = ref('')
const hotLiteratures = ref([])
const recommendedLiteratures = ref([])
const domains = ref([
  { id: 1, name: '计算机科学' },
  { id: 2, name: '人工智能' },
  { id: 3, name: '软件工程' },
  { id: 4, name: '数据科学' },
  { id: 5, name: '机器学习' }
])

// 模拟数据加载
onMounted(() => {
  // 模拟热门文献数据
  hotLiteratures.value = [
    { id: 1, title: '大型语言模型在软件工程中的应用研究', authors: '张三, 李四', publishDate: '2023-10-15', citations: 128 },
    { id: 2, title: '基于深度学习的代码自动补全系统设计', authors: '王五, 赵六', publishDate: '2023-09-22', citations: 95 },
    { id: 3, title: '智能代码审查工具的研究与实现', authors: '钱七, 孙八', publishDate: '2023-08-30', citations: 76 },
  ]
  
  // 模拟个性化推荐数据
  recommendedLiteratures.value = [
    { id: 4, title: '跨模态学习在软件开发中的应用', authors: '周九, 吴十', publishDate: '2023-11-05', citations: 62 },
    { id: 5, title: '基于知识图谱的代码理解系统', authors: '郑十一, 王十二', publishDate: '2023-07-18', citations: 88 },
  ]
})

// 搜索功能
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({ path: '/lingTach/search', query: { q: searchQuery.value } })
  }
}

// 跳转到智能问答
const goToQa = () => {
  router.push('/lingTach/qa')
}

// 跳转到文献详情
const goToDetail = (id) => {
  router.push(`/lingTach/detail?id=${id}`)
}

// 跳转到领域分类
const goToDomain = (domainId) => {
  router.push({ path: '/lingTach/search', query: { domain: domainId } })
}
</script>

<template>
  <div class="home-layout">
    <!-- 头部搜索区域 -->
    <header class="home-header">
      <div class="search-container">
        <div class="search-box">
          <NInput
            v-model:value="searchQuery"
            placeholder="搜索文献、关键词、作者..."
            class="search-input"
            @keyup.enter="handleSearch"
          />
          <NButton type="primary" class="search-btn" @click="handleSearch">
            搜索
          </NButton>
        </div>
        <div class="header-actions">
          <NButton class="qa-btn" @click="goToQa">
            <span>智能问答</span>
          </NButton>
        </div>
      </div>
    </header>

    <!-- 内容区域 -->
    <main class="home-content">
      <div class="content-wrapper">
        <!-- 左侧主要内容 -->
        <div class="main-section">
          <!-- 领域导航 -->
          <section class="domain-section">
            <h2 class="section-title">领域导航</h2>
            <div class="domain-list">
              <NButton
                v-for="domain in domains"
                :key="domain.id"
                class="domain-btn"
                @click="goToDomain(domain.id)"
              >
                {{ domain.name }}
              </NButton>
            </div>
          </section>

          <NDivider />

          <!-- 热门文献 -->
          <section class="literature-section">
            <div class="section-header">
              <h2 class="section-title">热门文献</h2>
              <a href="/lingTach/search?type=hot" class="section-more">更多 &gt;</a>
            </div>
            <div class="literature-list">
              <NCard
                v-for="literature in hotLiteratures"
                :key="literature.id"
                class="literature-card"
                @click="goToDetail(literature.id)"
              >
                <div class="literature-title">{{ literature.title }}</div>
                <div class="literature-meta">
                  <span class="authors">{{ literature.authors }}</span>
                  <span class="publish-date">{{ literature.publishDate }}</span>
                  <span class="citations">{{ literature.citations }} 引用</span>
                </div>
              </NCard>
            </div>
          </section>
        </div>

        <!-- 右侧推荐区域 -->
        <div class="recommendation-section">
          <NCard class="recommendation-card">
            <h2 class="section-title">为您推荐</h2>
            <div class="recommendation-list">
              <div
                v-for="literature in recommendedLiteratures"
                :key="literature.id"
                class="recommendation-item"
                @click="goToDetail(literature.id)"
              >
                <div class="rec-title">{{ literature.title }}</div>
                <div class="rec-meta">{{ literature.authors }}</div>
              </div>
            </div>
            <NButton type="default" class="refresh-btn">
              换一批
            </NButton>
          </NCard>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
.home-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);

  // 头部搜索区域
  .home-header {
    @apply bg-gradient-to-r from-[var(--primary-color)] to-[#4080ff] py-[40px] pb-[60px] text-center relative overflow-hidden;
    
    .search-container {
      @apply max-w-[960px] mx-auto px-[20px] relative z-[1];
      
      .search-box {
        @apply flex max-w-[600px] mx-auto rounded-[var(--border-radius-lg)] overflow-hidden shadow-lg;
        
        .search-input {
          @apply flex-1 border-none px-[20px] py-[16px] text-[16px] bg-white;
          
          &::placeholder {
            @apply text-[var(--text-tertiary)];
          }
        }
        
        .search-btn {
          @apply px-[24px] text-[16px] h-auto bg-[var(--accent-color)] border-[var(--accent-color)];
          
          &:hover {
            @apply bg-[var(--accent-color-hover)] border-[var(--accent-color-hover)];
          }
        }
      }
      
      .header-actions {
        @apply mt-[20px];
        
        .qa-btn {
          @apply bg-white/20 text-white border border-white/30;
          
          &:hover {
            @apply bg-white/30;
          }
        }
      }
    }
  }
  
  // 内容区域
  .home-content {
    @apply flex-1 overflow-y-auto p-[20px];
    
    .content-wrapper {
      @apply max-w-[1200px] mx-auto flex gap-[20px];
      
      // 左侧主要内容
      .main-section {
        @apply flex-1;
        
        // 领域导航
        .domain-section {
          @apply bg-white rounded-[var(--border-radius-lg)] p-[20px] mb-[20px] shadow-[var(--shadow-sm)];
          
          .domain-list {
            @apply flex flex-wrap gap-[12px];
            
            .domain-btn {
              @apply px-[16px] py-[8px] border border-[var(--border-color)] bg-white text-[var(--text-secondary)] rounded-[var(--border-radius-md)] text-[14px] transition-all duration-300 ease;
              
              &:hover {
                @apply border-[var(--primary-color)] text-[var(--primary-color)] bg-[var(--bg-secondary)];
              }
            }
          }
        }
        
        // 热门文献
        .literature-section {
          @apply bg-white rounded-[var(--border-radius-lg)] p-[20px] mb-[20px] shadow-[var(--shadow-sm)];
          
          .section-header {
            @apply flex justify-between items-center mb-[16px];
            
            .section-more {
              @apply text-[14px] text-[var(--primary-color)] text-decoration-none;
              
              &:hover {
                @apply text-decoration-underline;
              }
            }
          }
          
          .literature-list {
            @apply flex flex-col gap-[12px];
            
            .literature-card {
              @apply border border-[var(--border-color)] rounded-[var(--border-radius-md)] p-[16px] cursor-pointer transition-all duration-300 ease;
              
              &:hover {
                @apply border-[var(--primary-color)] shadow-[var(--shadow-sm)] transform -translate-y-1;
              }
              
              .literature-title {
                @apply text-[16px] font-medium text-[var(--text-primary)] mb-[8px] leading-[1.4];
              }
              
              .literature-meta {
                @apply flex gap-[16px] text-[12px] text-[var(--text-tertiary)];
              }
            }
          }
        }
      }
      
      // 右侧推荐区域
      .recommendation-section {
        @apply w-[320px];
        
        .recommendation-card {
          @apply bg-white rounded-[var(--border-radius-lg)] p-[20px] shadow-[var(--shadow-sm)] h-fit;
          
          .recommendation-list {
            @apply flex flex-col gap-[16px] mb-[16px];
            
            .recommendation-item {
              @apply p-[12px] border border-[var(--border-color)] rounded-[var(--border-radius-md)] cursor-pointer transition-all duration-300 ease;
              
              &:hover {
                @apply border-[var(--primary-color)] bg-[var(--bg-secondary)];
              }
              
              .rec-title {
                @apply text-[14px] text-[var(--text-primary)] mb-[4px] leading-[1.4];
              }
              
              .rec-meta {
                @apply text-[12px] text-[var(--text-tertiary)];
              }
            }
          }
          
          .refresh-btn {
            @apply w-full border border-[var(--border-color)] bg-white text-[var(--text-secondary)];
            
            &:hover {
              @apply border-[var(--primary-color)] text-[var(--primary-color)];
            }
          }
        }
      }
    }
  }
}

// 通用样式类
.section-title {
  @apply text-[18px] font-semibold text-[var(--text-primary)] m-0 mb-[16px];
}

// 响应式设计
@media (max-width: 768px) {
  .home-layout {
    .home-header {
      @apply py-[30px] pb-[40px];
      
      .search-container {
        .search-box {
          @apply max-w-full;
          
          .search-input {
            @apply px-[16px] py-[12px] text-[14px];
          }
          
          .search-btn {
            @apply px-[16px] text-[14px];
          }
        }
      }
    }
    
    .home-content {
      .content-wrapper {
        @apply flex-col;
        
        .recommendation-section {
          @apply w-full;
        }
      }
    }
  }
}
</style>